﻿@section Contents{
    <style type="text/css">
::-moz-placeholder { color:#7792b3;}
:-ms-input-placeholder { color:#7792b3;}
::-webkit-input-placeholder{color: #7792b3;}
body{width:100%;height:100%;background-image: url(/Content/login/login_img.jpg);}
.page-login .contant{width:780px;display:block;position:relative; z-index: 10; margin:110px auto 0; overflow:hidden;padding-bottom: 50px;}
.page-login .contant .bg{position:absolute;top: 0;left: 0;width:780px;height:100%; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;z-index: -1; pointer-events: none;}
.page-login .contant .title{width:780px;margin:100px auto 40px; text-align:center; font-size:4em; color:white;}
.page-login .contant .box{width:380px;min-height:385px;margin:0 auto;}
.page-login .contant .box .inputs input{width:100%;height:50px;display:block;box-sizing: border-box;background:rgba(0,0,0,0.3);font-size: 18px;color:#fff;border:0;padding:0px 0 0 20px;line-height: 1;}
.page-login .contant .box .inputs .user,.page-login .contant .box .inputs .pass{position:relative;}
.page-login .contant .box .inputs .user,.page-login .contant .box .inputs .pass{margin-bottom: 20px;}
.page-login .contant .box .inputs .Error{color:#ee3344;font-size: 16px;padding-left: 20px;padding-top: 4px;}

.page-login .contant .box .inputs .pass.false input,.page-login .contant .box .inputs .user.false input{border: 1px solid #ee3344;color:#ee3344;}
.page-login .verification.false input{border: 1px solid #ee3344!important;color:#ee3344!important;}
.page-login .contant .box .inputs .pass.false:after,.page-login .contant .box .inputs .user.false:after{content:'';width:30px;height:30px;display:block;position:absolute;top: 10px;right:-46px;background:url(../images/icon.png) no-repeat 0px -90px;}
.page-login .contant .box .inputs .pass.ture:after,.page-login .contant .box .inputs .user.ture:after{content:'';width:30px;height:30px;display:block;position:absolute;top: 10px;right:-46px;background:url(../images/icon.png) no-repeat 0px -44px;}
.page-login .contant .box .inputs .verification {margin-bottom: 12px; font-size:0;}
.page-login .contant .box .inputs .verification input{width:276px;display:inline-block;}
.page-login .contant .box .inputs .verification .img{height:48px;width:99px; margin-left:5px;box-sizing:border-box;background:rgba(0,0,0,0.3);display:inline-block;vertical-align:top;cursor:pointer;}
.page-login .contant .box .inputs .verification .img img{width:100%; height:100%;}
.page-login .contant .box .inputs .chexbox{color:#a0c5f2;font-size: 14px;}
.page-login .contant .box .inputs .chexbox .checkboxFour {width:13px;height:13px;display:inline-block; position:relative;}
.page-login .contant .box .inputs .chexbox .checkboxFour input[type=checkbox]{width:13px;height:13px; opacity:0;}
.page-login .contant .box .inputs .chexbox .checkboxFour label{width:13px;height:13px;display:inline-block;vertical-align:middle;-webkit-appearance: none;appearance:none;background:url(../images/icon.png) no-repeat 0 0;padding:0;margin-right: 4px; position:absolute;left:0; top:1px;}
.page-login .contant .box .inputs .chexbox .checkboxFour input[type=checkbox]:checked + label{background-position: 0 -24px;}
.page-login .contant .box .inputs .chexbox{text-align: right;}
.page-login .contant .box .inputs .chexbox a{color:#a0c5f2;}
.page-login .contant .box .inputs .btn{background:#4499ff;color:#fff;font-size: 22px;padding-left: 0;margin-top: 30px;margin-bottom: 30px; cursor:pointer;}
.page-login .contant .box .inputs input:focus{border: 1px solid #fff;}
.page-login .contant .box .inputs .btn:focus,.page-login .contant .box .inputs .chexbox input[type=checkbox]:focus{border:0;}
.page-footer{color: #4c89a1; font-size: 12px; line-height: 22px; text-align: center;padding: 60px 0; letter-spacing: 1px}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset;}
    </style>
}
<div id="container">
    <div class="page-login">
        <div class="contant">
            <div class="bg">
            </div>
            <div class="title">
                国家仓储资源运营平台
            </div>
            <div class="box">
                <form class="layui-form">
                    <div class="inputs">
                        <div class="user">
                            <input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" lay-verify="required" class="layui-input">
                            <!-- 如果验证正确就是加ture,否则就是加false -->
                            <p class="Error">
                            </p>
                        </div>
                        <div class="pass">
                            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" lay-verify="required" class="layui-input">
                            <p class="Error">
                            </p>
                        </div>
                        <div class="verification">
                            <input type="text" name="validateCode" id="validateCode" placeholder="请输入验证码" autocomplete="off" lay-verify="required" class="layui-input">
                            <span class="img">
                                <img class="admin-captcha" style="cursor: pointer;" src="@Url.Action("ValidateCode", "Home")?t=@DateTime.Now.Ticks" title="看不清，点击换一张" />
                            </span>
                            <p class="Error js_vdCode">
                            </p>
                        </div>
                        @*<div class="chexbox">
                        <label>
                            <div class="checkboxFour">
                                <input value="1" id="jizhumima" name="" type="checkbox">
                                <label for="jizhumima">
                                </label>
                            </div>
                            <span>7天免登录</span>
                        </label>
                        <a href="javascript:void(0);" target="_blank">忘记密码？</a>
                    </div>*@
                        <input type="button" value="登录" id="btnLogin" class="btn" lay-submit lay-filter="login" />
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--  版权 -->
    <div class="page-footer"><a href="javascript:void(0);" style="color:#fff;">中储恒科物联网系统有限公司</a></div>
    <!--  版权 end-->
</div>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        //刷新验证码
        $(".admin-captcha").click(function () {
            var newSrc = "@Url.Action("ValidateCode", "Home")" + "?t=" + (new Date()).getTime();
            this.src = newSrc;
            return false;
        });

        //登录按钮
        form.on("submit(login)", function (formdata) {
            $.ajax({
                url: '/Home/Login',
                data: formdata.field,
                success: function (res) {
                    if (res.code == 0) {
                        location.href = "../Home/Index";
                    }
                    else {
                        layer.msg(res.msg);
                        if (res.code == -1)
                            $(".admin-captcha").click();
                    }
                }
            });
            return false;
        })

        $('#validateCode').on('keydown', function (event) {
            if (event.keyCode == 13) {
                $("#btnLogin").trigger("click");
                return false
            }
        });
    })
</script>